<template>
  <div class="delivery-check-page">
    <top class="top" :key="id+'-top'"></top>
    <middle ref="data" class="middle" :key="id+'-middle'" @refresh="refresh" @loaded="loaded"></middle>
    <bottom class="bottom" :key="id+'-bottom'" 
      @deleteDelivery="deleteDelivery()" 
      @deleteConfirm="deleteConfirm"
      @exportExcel="exportExcel"
      @refresh="refresh"
      :status="status"
      :summary="summary"
    />
  </div>
</template>

<script>
import Top from './layout/check/Top';
import Middle from './layout/check/Middle';
import Bottom from './layout/check/Bottom';

import {
  deliveryDelReq
} from '@/requests/deliveryRequests';

import {
  exportDeliveryExcel
} from '@/utils/print.js';

export default {
  name: "DeliveryCheckPage",
  props: {

  },
  data() {
    return {
      id: this.$route.params.id,
      summary: {
        deliveryId: 0,
        name: 0,
        totalAmount: 0,
        orderQuantity: 0
      },
      status: {
        paid: false,
        reviewed: false
      }
    };
  },
  computed: {
    form() {
      return this.$refs.data.getFormData().form;
    },
    table() {
      return this.$refs.data.getTableData().data;
    },
    totalAmount() {
      return this.$refs.data.getTableData().totalAmount;
    },
  },
  mounted() {
  },
  watch: {
    '$route' (to, from) {
      if(to.params.id !== this.id && to.name == 'DeliveryCheck'){
        this.load();
      }
      if(from.name == 'OrderCheck') {
        this.refresh();
      }
    },
  },
  methods: {
    load() {
      this.id = this.$route.params.id ?? 0;
    },
    sum() {
      const form = this.$refs.data.getFormData().form;
      const totalAmount = this.$refs.data.getTableData().totalAmount;
      const orderQuantity = this.$refs.data.getTableData().data.length;

      this.summary = {
        deliveryId: form.id,
        name: form.clientId + ' - ' + form.clientName,
        totalAmount: totalAmount,
        orderQuantity: orderQuantity,
        clientId: form.clientId,
        deliveryNumber: form.deliveryNumber
      }
    },
    deleteDelivery() {
      this.sum();
    },
    deleteConfirm() {
      const id = this.id;
      // 通知后端进行删除delivery的操作
      const loaded = this.$message.loading('正在删除送货单，请勿重复点击删除', 0);
      deliveryDelReq(id).then((res) => {
        loaded();
        // 如果成功，啥东西都不返回。
        this.$router.push({
          name: 'DeliveryIndex',
        });

        // 弹框提示删除成功
        this.$notification['success']({
          message: '删除送货单',
          description:
            `删除送货单成功，删除送货单号 ${id}`,
        });
        // 遗弃本页面id
        this.id = this.id + '-trash';
        // 提示刷新送货单和订单缓存
        this.$store.commit('updateDeliveriesCache');
        this.$store.commit('updateOrdersCache');
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '修改送货单',
          description:
            `删除送货单失败，失败信息 ${err.data.message}`,
        });
      });
    },
    exportExcel() {
      const form = this.form;
      const table = this.table;
      const totalAmount = this.totalAmount;
      exportDeliveryExcel(form, table, totalAmount)
    },
    refresh() {
      const id = this.id;
      this.id = id + '-refresh';
      setTimeout(() => {
        this.id = id;
      }, 1);
    },
    loaded(status) {
      this.status = status;
      setTimeout(() => {
        this.sum();
      }, 10);
      
    }
  },
  components: {
    Top,
    Middle,
    Bottom
  },
};
</script>

<style scoped lang="scss">
.delivery-check-page {
  >.top {
    margin-top: 2vh;
    margin-bottom: 1vh;
  }
  >.middle {
    
  }
}
</style>
